<template>
	供应商管理
	<br/>
	<el-button @click="updateX">修改vuex的数据</el-button>
	<el-button @click="getData">获取数据</el-button><br/>
	<!-- 数据列表 -->
	<el-table :data="news" style="width: 70%">
	    <el-table-column prop="title" label="姓名" width="180" />
	    <el-table-column prop="title" label="电话" width="180" />
	    <el-table-column prop="title" label="地址" >
		  <template  #default="scope">
			  
			  <!-- <img :src="scope.row.picUrl"  width="100" height="80" /> -->
			  <!-- <el-image :src="scope.row.picUrl"  /> -->
			
		  </template>
		</el-table-column>
		
		<el-table-column label="编辑">
			<template #default="scope">
				
				<el-button><el-icon><Edit /></el-icon></el-button>
			    <el-button  @click="deleteRow(scope.$index)"><el-icon><Delete /></el-icon></el-button>
			
			</template>
			
		</el-table-column>
		
	  </el-table>

	
</template>

<script>
	export default{
		name:"app",
		data(){
			return{
				news:[]
			}
		},
		methods:{
			updateX(){
				//修改vuex的数据  ps:该功能可用于登录
				this.$store.commit('num',1000)
			},
			getData(){
				let that=this  //注意这个that用于替代vue里的this
				//axios
				this.$axios.get("http://api.tianapi.com/woman/index",{
					params:{
						key:'db74b1b662ea8e284e4c59a22a802c3b'
					}
				}).then(function(res){
					console.log(res.data.newslist)
					that.news=res.data.newslist   //如果这里用得是this不是that，会报错，因为this在这里不是vue而是axios了  
				})
					
				
			},
			deleteRow(rIndex){
				//删除数组中的数据
				this.news.splice(rIndex,1)
			}
		}
		
	}
</script>

<style>
	.el-table{
		margin: 10px auto;
	}
</style>
